<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded" class="mar-top-xl">Loading...</div>
      <div ng-if="secret">
        <h1 class="contains-actions">
          <div class="pull-right dropdown">
            <!--
              `canIAddToProject` returns true if you can update any resource.
              We'll use this as a best-effort check to see if we should show the
              button.
            -->
            <button ng-if="project.metadata.name | canIAddToProject"
                    type="button"
                    class="btn btn-default hidden-xs"
                    ng-disabled="!secret.data"
                    ng-click="addToApplication()">
              Add to Application
            </button>
            <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown" ng-hide="!('secrets' | canIDoAny)">
              Actions
              <span class="caret"></span>
            </button>
            <!-- Check `canIAddToProject` for the mobile menu since "Add to Application" uses it. -->
            <a href=""
               ng-if="project.metadata.name | canIAddToProject"
               class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
               data-toggle="dropdown"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span></a>
            <ul class="dropdown-menu dropdown-menu-right actions action-button">
              <li ng-if="(project.metadata.name | canIAddToProject)" class="visible-xs">
                <a href="" role="button" ng-class="{ 'disabled-link': !secret.data }" ng-attr-aria-disabled="{{!secret.data ? 'true' : undefined}}" ng-click="addToApplication()">Add to Application</a>
              </li>
              <li ng-if="secretsVersion | canI : 'update'">
                <a ng-href="{{secret | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li ng-if="secretsVersion | canI : 'delete'">
                <delete-link
                  kind="Secret"
                  resource-name="{{secret.metadata.name}}"
                  project-name="{{secret.metadata.namespace}}"
                  alerts="alerts">
                </delete-link>
              </li>
            </ul>
          </div>
          {{secret.metadata.name}}
          <small class="meta">created <span am-time-ago="secret.metadata.creationTimestamp"></span></small>
        </h1>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div ng-if="secret" class="row">
        <div class="col-sm-12">
          <div class="resource-details">
            <h2 class="mar-top-none">
              {{secret.type}}
              <small class="mar-left-sm"><a href="" ng-if="secret.data" ng-click="view.showSecret = !view.showSecret">{{view.showSecret ? "Hide" : "Reveal"}} Secret</a></small>
            </h2>
            <dl class="secret-data left">
              <div ng-repeat="(secretDataName, secretData) in decodedSecretData" class="image-source-item">
                <div ng-switch="secretDataName">
                  <div ng-switch-when=".dockercfg">
                    <ng-include src=" 'views/_config-file-params.html' "></ng-include>
                  </div>

                  <div ng-switch-when=".dockerconfigjson">
                    <ng-include src=" 'views/_config-file-params.html' "></ng-include>
                  </div>
                  <div ng-switch-default>
                    <dt ng-attr-title="{{secretDataName}}">{{secretDataName}}</dt>
                    <dd ng-if="view.showSecret && !secretData"><em>No value</em></dd>
                    <dd ng-if="view.showSecret && secretData">
                      <copy-to-clipboard
                          clipboard-text="secretData"
                          multiline="secretData | isMultiline : true"
                          display-wide="true">
                      </copy-to-clipboard>
                      <div ng-if="decodedSecretData.$$nonprintable[secretDataName]" class="help-block">
                        This secret value contains non-printable characters and is displayed as a Base64-encoded string.
                      </div>
                    </dd>
                    <dd ng-if="!view.showSecret">*****</dd>
                  </div>
                </div>
              </div>
            </dl>
            <div ng-if="!secret.data" class="empty-state-message text-center">
              <h2>No data.</h2>
              <p>This secret has no data.</p>
            </div>
            <annotations annotations="secret.metadata.annotations"></annotations>
          </div>
        </div><!-- /col-* -->
      </div>
    </div>
    <overlay-panel class="add-config-to-application" show-panel="addToApplicationVisible" show-close="true" handle-close="closeAddToApplication">
      <add-config-to-application project="project" api-object="secret" on-cancel="closeAddToApplication" on-complete="closeAddToApplication"></add-config-to-application>
    </overlay-panel>
  </div><!-- /middle-content -->
</div>
